<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据的双向绑定</title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <h2>{{msg}}</h2>
            <input type="text" v-model="msg">
        </div>
        <hr>
        <div>
            <textarea name="" id="" cols="30" rows="10" v-model="text">
            </textarea>
            {{text}}
        </div>
        <hr>
        <div>
            我的学历：{{my_level}}
            <br>
            <select v-model="my_level" name="" id="">
                <option value="">请选择</option>
                <option value="小学">小学</option>
                <option value="初中学">初中学</option>
                <option value="中专">中专</option>
                <option value="高中">高中</option>
                <option value="大专">大专</option>
                <option value="本科">本科</option>
            </select>
        </div>
        <hr>
        <div>
            <h3>
                以开关状态来使用的复选框
            </h3>
            <input type="checkbox" id="checkbox" v-model="checked">
            <label for="checkbox">{{ checked }}</label>
            <div v-if="checked" style="width:100px ; height: 100px; background-color: aqua;"></div>
        </div>
        <div>
            <h3>
                选择多个选项来使用复选框
            </h3>
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>
            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">John</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mike</label>
            <br>
            <span>Checked names: {{ checkedNames }}</span>
        </div>

        <hr>
        <div>
            <div id="example-4">
                <input type="radio" id="one" value="One" v-model="picked">
                <label for="one">One</label>
                <br>
                <input type="radio" id="two" value="Two" v-model="picked">
                <label for="two">Two</label>
                <br>
                <span>Picked: {{ picked }}</span>
            </div>
        </div>
        <hr>

        <div>
            我们班班长是：{{Class[bz].name}}
            <select name="" id="" v-model="bz">
                <option v-for="s in Class" :value="s.num">{{s.name}}</option>
            </select>
        </div>

    </div>
    <div>
        <h2 id="text">小明好帅</h2>
        <input id="inputText" type="text" value="小明好帅">
    </div>


</body>
<script src=" https://cdn.jsdelivr.net/npm/vue@2.6.14">
</script>
<script>
    let h2Ele = document.getElementById('text')
    let input = document.getElementById('inputText')
    input.oninput = function () {
        let text = this.value
        h2Ele.innerText = text
    }
    // qq.com
    // email.qq.com

    // let reg = /^1(39|88|86)\d{8}$/
    // let reg2 = /^[0-9a-Z_]+@([0-9a-Z_]+)(\.[0-9a-Z_]{1,}){0,}\.(com|cn|net|org)$/

    // 实例化Vue对象
    let app = new Vue({
        el: '#app',         // Vue对象在页面中的作用容器
        // 当前Vue对象设置的默认数据
        data: {
            msg: '小明好帅',
            text: `女人像一本书。越看越能明白很多的道理。`,
            my_level: '',
            checked: false,
            checkedNames: ['John'],
            picked: '',
            Class: [
                { num1: 0, name: '未选择' },
                { num: 1, name: '小明' },
                { num: 2, name: '小红' },
                { num: 3, name: '小白' },
                { num: 4, name: '小胡' },
                { num: 5, name: '锋哥' },
            ],
            bz: 0
        },
        // 使用生命周期
        // beforeCreate: function () {
        //     this.test()
        // },
        mounted: function () {
            let _this = this
            setTimeout(function () {
                _this.msg = '小明好可爱'
                _this.my_level = '本科'
            }, 3000)
        },

        // methods是当前应用定义的函数方法
        methods: {


        }

    })


</script>

</html>